<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../../common/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//Dth HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dth">
<html>
<head>
<title>首页</title>
<script type="text/javascript" src="${ctx}/resources/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/website/home.js"></script>
</head>

<body>

<!-- BODY BEGIN -->
<div class="demo clearfix">
	<!-- ITEM LIST BEGIN -->
	<div id="item_list" class="item_list infinite_scroll">
		<c:forEach items="${items}" var="g">
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="${ctx}/good/detail/${g.id}">
						<img width="210" alt="${g.name}" src="${ctx}/${g.bigImg}" />
					</a>
					<span class="price">￥${g.shopPrice }</span>
					<div class="btns">
						<a href="#" class="img_album_btn">立即购买</a>
					</div>
				</div>
				<div class="title"><span>${g.name}</span></div>
			</div>
			<div class="item_b clearfix">
				<div class="items_likes fl">
					<a href="#" class="like_btn"></a>
					<em class="bold">916</em>
				</div>
				<div class="items_comment fr"><a href="#">评论</a><em class="bold">(0)</em></div>
			</div>
		</div>
		</c:forEach>
	</div>
</div>

<div style="height: 40px;">
	<div id="loadding" style="width:200px;margin:0 auto;text-align: center;display:none;">
		数据正在加载中...
		<img alt="" src="${ctx}/resources/images/loading.gif">
	</div>
</div>

<!-- ITEM TEMPLATE BEGIN : item的模板，给js使用 -->
<div id="item_template" style="display:none;">
	<div class="item masonry_brick">
		<div class="item_t">
			<div class="img">
				<a id="img_link" href="#">
					<img id="good_img" width="210" alt="js lazyload实现网页图片延迟加载特效" src="/shop4j/resources/images/pic/01.jpg" />
				</a>
				<span id="good_price" class="price">￥195.00</span>
				<div class="btns">
					<a id="addCar_btn" href="#" class="img_album_btn">查看详情</a>
				</div>
			</div>
			<div class="title"><span id="good_name">js lazyload实现网页图片延迟加载特效</span></div>
		</div>
		<div class="item_b clearfix">
			<div class="items_likes fl">
				<a id="like_btn" href="#" class="like_btn"></a>
				<em id="like_count" class="bold">916</em>
			</div>
			<div class="items_comment fr">
				<a id="comment_link" href="#">评论</a>
				<em id="comment_count" class="bold">(0)</em>
			</div>
		</div>
	</div>
</div>
<!-- ITEM TEMPLATE END -->
</body>
</html>